<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--编译作用域-->
<!--父模板使用自己的数据-->
<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post v-on:enlarge-text="postFontSize += 0.1"
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>
<template id="cpn">
  <div>
    <p v-show="isShow">我是子组件</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})
  new Vue({
  el: '#blog-posts-events-demo',
  data: {
    postFontSize: 1,
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})
  const cpn = {
    template: '#cpn',
    data() {
      return {
        name: '哈哈哈',
        isShow: false
      }
    },
    methods: {
      showMessage() {
       console.log('我是子组件')
      }
    },
    props: {}
  }
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
      isShow: true
    },
    components: {
      cpn
    },
    methods: {
      btnClick () {

      }
    }
  })
</script>
</body>
</html>
